<template>
    <div id="pictureManagePage">
        <a-flex justify="space-between">
            <h2>空间管理</h2>
            <a-space>
                <a-button type="primary" href="/add_space" target="_blank">+ 创建空间</a-button>
            </a-space>
        </a-flex>
        <a-form layout="inline" :model="searchParams" @finish="doSearch">
            <a-form-item label="空间名称" name="spaceName">
                <a-input v-model:value="searchParams.spaceName" placeholder="请输入空间名称" allow-clear />
            </a-form-item>
            <a-form-item label="空间级别" name="spaceLevel">
                <a-select
                        v-model:value="searchParams.spaceLevel"
                        :options="SPACE_LEVEL_OPTIONS"
                        placeholder="请输入空间级别"
                        style="min-width: 180px"
                        allow-clear
                />
            </a-form-item>
            <a-form-item label="用户 id" name="userId">
                <a-input v-model:value="searchParams.userId" placeholder="请输入用户 id" allow-clear />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit">搜索</a-button>
            </a-form-item>
        </a-form>
        <!-- 表格 -->
        <a-table :columns="columns" :data-source="dataList" :pagination="pagination" @change="doTableChange">
            <template #bodyCell="{ column, record }">
                <!-- 空间级别 -->
                <template v-if="column.dataIndex === 'spaceLevel'">
                    <a-tag>{{ SPACE_LEVEL_MAP[record.spaceLevel] }}</a-tag>
                </template>
                <!-- 使用情况 -->
                <template v-if="column.dataIndex === 'spaceUseInfo'">
                    <div>大小：{{ formatSize(record.totalSize) }} / {{ formatSize(record.maxSize) }}</div>
                    <div>数量：{{ record.totalCount }} / {{ record.maxCount }}</div>
                </template>
                <template v-else-if="column.dataIndex === 'createTime'">
                    {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
                <template v-else-if="column.dataIndex === 'editTime'">
                    {{ dayjs(record.editTime).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
                <template v-else-if="column.key === 'action'">
                    <a-space wrap>
                        <a-button type="link" :href="`/add_space?id=${record.id}`" target="_blank">
                            编辑
                        </a-button>
                        <a-button type="link" danger @click="doDelete(record.id)">删除</a-button>
                    </a-space>
                </template>
            </template>
        </a-table>
    </div>
</template>
<script lang="ts" setup>
import {computed, onMounted, reactive, ref} from "vue";
import {message} from "ant-design-vue";

import {

    PIC_REVIEW_STATUS_ENUM,
    PIC_REVIEW_STATUS_MAP,
    PIC_REVIEW_STATUS_OPTIONS,
} from '../../constants/picture.ts';
import {
    deletePictureUsingPost,
    doPictureReviewUsingPost,
    listPictureByPageUsingPost
} from "../../api/pictureController";

// 给表格定义列
const columns = [

    {
        title: 'id',
        dataIndex: 'id',
        width: 80,
    },
    {
        title: '空间名称',
        dataIndex: 'spaceName',
    },
    {
        title: '空间级别',
        dataIndex: 'spaceLevel',
    },
    {
        title: '使用情况',
        dataIndex: 'spaceUseInfo',
    },
    {
        title: '用户 id',
        dataIndex: 'userId',
        width: 80,
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
    },
    {
        title: '编辑时间',
        dataIndex: 'editTime',
    },
    {
        title: '操作',
        key: 'action',
    },
];


// 数据
const dataList = ref([])
const total = ref(0)

// 搜索条件
const searchParams = reactive<API.SpaceQueryRequest>({
    current: 1,
    pageSize: 10,
    sortField: 'createTime',
    sortOrder: 'descend',
})

// 分页参数
const pagination = computed(() => {
    return {
        current: searchParams.current ?? 1,
        pageSize: searchParams.pageSize ?? 10,
        total: total.value,
        showSizeChanger: true,
        showTotal: (total) => `共 ${total} 条`,
    }
})

// 获取数据
const fetchData = async () => {
    const res = await listSpaceByPageUsingPost({
        ...searchParams,
    })
    if (res.data.data) {
        dataList.value = res.data.data.records ?? []
        total.value = res.data.data.total ?? 0
    } else {
        message.error('获取数据失败，' + res.data.message)
    }
}

// 页面加载时请求一次
onMounted(() => {

    fetchData()
})

// 表格变化处理
const doTableChange = (page: any) => {

    searchParams.current = page.current
    searchParams.pageSize = page.pageSize
    fetchData()
};

// 获取数据
const doSearch = () => {

    // 重置页码
    searchParams.current = 1
    fetchData()
};

// 删除数据
const doDelete = async (id: string) => {

    if (!id) {
        return
    }
    const res = await deletePictureUsingPost({ id })
    if (res.data.code === 0) {
        message.success('删除成功')
        // 刷新数据
        fetchData()
    } else {
        message.error('删除失败')
    }
};

// 审核函数调用后端
const handleReview = async (record: API.Picture, reviewStatus: number) => {

    const reviewMessage = reviewStatus === PIC_REVIEW_STATUS_ENUM.PASS ? '管理员操作通过' : '管理员操作拒绝'
    const res = await doPictureReviewUsingPost({

        id: record.id,
        reviewStatus,
        reviewMessage,
    })
    if (res.data.code === 0) {

        message.success('审核操作成功')
        // 重新获取列表
        fetchData()
    } else {

        message.error('审核操作失败，' + res.data.message)
    }
}

</script>
